<template>
  <div class="box">
    <!-- 左侧 -->
    <div class="boxLef">
      <div class="leftTop">
        <el-collapse @change="handleChange" class="growlBor">
          <el-collapse-item title="练习室" class="myGrowl">
            <div class="activeCol" @click="toTraining">
                我的练习室
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div class="leftBot">
        <div>
          <span class="navigation-item-content active"
            @click="toMediaCache"
          >缓存</span>
        </div>
        <div>
          <span class="navigation-item-content">音频库</span>
        </div>
        <div>
          <span class="navigation-item-content"
          @click="toCollection"
          >收藏</span>
        </div>
        <div>
          <span class="navigation-item-content"
          @click="toViewRecords"
          >历史</span>
        </div>
      </div>
    </div>
    <!-- 右侧 -->
    <div class="boxRig">
      <div class="rigthTop">
        <div class="boxes">
            <span :class="type===0? 'active' :''" @click="type=0" >全部</span>
            <span :class="type===1? 'active' :''" @click="type=1">我创建的</span>
            <span :class="type===2? 'active' :''" @click="type=2">我加入的</span>
            <span :class="type===3? 'active' :''" @click="type=3">我课程的</span>
        </div>
        <div class="training-btn">
            创建
        </div>
      </div>
      <div class="rigthBot">
        <div class="img">
            <div v-if="loading===false">
                <img src="//rs.dance365.com/img/no_content@3x.0fd78ad2.png"
                alt="无更多数据">
                <p>无更多数据</p>
            </div>
            <img v-else src="https://img1.baidu.com/it/u=2268021483,1593455944&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=380"
            />
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent,ref, watch } from "vue";
import type { TabsPaneContext } from "element-plus";
export default defineComponent({
  name: "Training",
});
</script>
<script lang="ts" setup>
import { useRouter } from "vue-router";
const router = useRouter();
const type = ref<number>(0);
const loading = ref<boolean>(false)
const handleChange = (val: string[]) => {
  //   console.log(val);
};
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
//改变type，控制tab栏高亮显示
const changeType = (val:number)=>{
    type.value = val;
}
//监听值的改变，下方图片闪烁
watch(type,()=>{
    loading.value = true;
    setTimeout(()=>{
        loading.value = false;
    },100)
})

//跳转到training页面
const toTraining = ()=>{
    router.push({
        name: "Training"
    });
}
//跳转到缓存页面
const toMediaCache = ()=>{
    router.push({
        name: "MediaCache"
    });
}
//去收藏页
const toCollection = ()=>{
    router.push({
      name:"Collections"
    })
}
//去历史页
const toViewRecords = ()=>{
    router.push({
      name:"View_records"
    })
}

</script>
<style scoped lang="scss">
//左边栏
.box {
  display: flex;
  margin: 15px 90px;
  // // background-color: papayawhip;
  // justify-content: center;
  // align-items: center;
}
.boxLef {
  width: 170px;
  margin-right: 10px;
  box-sizing: border-box;
}
.growlBor {
  border: none;
  width: 170px;
  background-color: #fff;
  margin-bottom: 10px;
}
.myGrowl {
  width: 150px;
  margin: 0 auto;
}
.activeCol {
  text-align: center;
  font-size: 14px;
}
.activeCol:hover {
  color: #f93684;
}
.leftBot{
    width:170px;
    height: 210px;
    // background-color: plum;
    background-color: #fff;
}
.leftBot span {
  font-size: 14px;
  color: #111;
  padding: 17px 21px;
  cursor: pointer;
  position: relative;
  display: block;
  text-decoration: none;
}
.leftBot div span:before {
  background-color: #fff;
  content: " ";
  position: absolute;
  width: 4px;
  height: 37px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: background-color 0.3s ease;
}
.navigation-item-content.active:before,.navigation-item-content:hover:before {
  background-color: #f93684;
}
.navigation-item-content:before {
  background-color: #fff;
  content: " ";
  position: absolute;
  width: 4px;
  height: 37px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: background-color 0.3s ease;
}
.growlBor.navigation-item-content:before {
  background-color: #fff;
  content: " ";
  position: absolute;
  width: 4px;
  height: 37px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: background-color 0.3s ease;
}
//右边栏
.rigthTop {
    padding: 15px 30px;
    border-radius: 4px;
    // background-color: #fff;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // background-color: powderblue;
    background-color: #fff;
}
.boxes span{
  display: inline-block;
    cursor: pointer;
    font-size: 14px;
    border-radius: 4px;
    color: #7d8090;
    padding: 9px 12px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-right: 24px;
    margin-bottom: 10px;
}
.boxes span.active{
    background-color: #f93684;
    color: #fff;
}
.training-btn{
    width: 84px;
    height: 32px;
    line-height: 32px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    background: #f93684;
    border-radius: 16px;
    cursor: pointer;
    margin-left: 200px;
}
.rigthBot{
    width: 1020px;
    height: 730px;
    // background-color: skyblue;
    position: relative;
    background-color: #fff;      
}
.img{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.img p{
    color: #7d8090;
    text-align: center;
}


</style>
